<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>v-model 修饰符的使用</title>
</head>
<body>
<div id="app">
    <!--输入框内容默认实时进行同步-->
    <!--<label for="message">欢迎信息</label><input type="text" name="message" id="message" placeholder="请输入要显示的信息" v-model="info">
    <h1>{{ info }}</h1>-->

    <!--延迟更新显示——在按下回车键或者失去输入焦点的时候进行更新显示-->
    <!--<label for="message">欢迎信息</label><input type="text" name="message" id="message" placeholder="请输入要显示的信息"
                                                v-model.lazy="info">
    <h1>{{ info }}</h1>-->


    <!--<label for="message">欢迎信息</label><input type="number" name="message" id="message" placeholder="请输入要显示的信息" v-model="info" >
    <h1>{{ info }}&#45;&#45;{{ typeof info}}</h1>-->

    <label for="message">欢迎信息</label><input type="text" name="message" id="message" placeholder="请输入要显示的信息" v-model.number="info" >
    <h1>{{ info }}--{{ typeof info}}</h1>


    <!--<label for="message">欢迎信息</label><input type="text" name="message" id="message2" placeholder="请输入要显示的信息" v-model.trim="info" >-->
    <!--<h1>{{ info }}</h1>-->

</div>

<script type="module">
    import {createApp, ref} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let info = ref("")
                return {
                    info
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>